<template>
    <div ref="swrapper" class="swrapper">
        <slot></slot>
    </div>
</template>

<script>
// import BScroll from 'better-scroll';//引入better-scroll
import BScroll from '@better-scroll/core'
import PullUp from '@better-scroll/pull-up'
export default {
    props:{
        /** probeType 探测类型
         * 1： 滚动的时候会派发scroll事件，会节流
         * 2： 滚动的时候，实时派发scroll,不会节流
         * 3： 除了实时派发scroll事件，在swiper情况下任能实时派发scrll事件
         */
        probeType:{
            type:Number,
            default(){ return 1 }
        },
        // 点击列表是否派发click事件
        click:{ 
            type: Boolean,
            default(){return true}
        },
        //是否开启横向滚动
        scrollX:{
            type: Boolean,
            default(){return false}
        },
        // 是否派发滚动事件
        listenScroll: {
            type: Boolean,
            default(){return false}
        },
        // 列表数据
        data:{
            type: Array,
            default(){return null}
        },
        // 时候派发滚动到底部事件。用于上拉加载
        pullup:{
            type: Boolean,
            default(){return false}
        },
        // 时候派发顶部下拉事件。用于下拉刷新
        pulldown:{
            type: Boolean,
            default(){return false}
        },
        /**
         * 是否派发列表滚动开始的事件
         */
        beforeScroll: {
            type: Boolean,
            default(){return false}
        },
        // 当数据更新后，刷新scroll的延时。
        refreshDelay:{
            type: Number,
            default(){return 20}
        }
    },
    mounted(){
        // 保证在DOM渲染完毕初始化better-scroll 
        this.$nextTick(()=>{
            this._initScroll();
            this.refresh();
        })
    },
    methods:{
        _initScroll(){
            if(!this.$refs.swrapper){
                return;
            }
            this.scroll = new BScroll(this.$refs.swrapper,{
                probeType:this.probeType,
                click:this.click,
                scrollX:this.scrollX,
                pullUpLoad: this.pullup

            })

            // 是否派发滚动
            if(this.listenScroll){
                this.scroll.on('scroll',(pos)=>{
                    this.$emit('scroll', pos)
                })
                this.scroll.on('scrollEnd',(pos)=>{
                    this.$emit('scrollEnd',pos)
                })
            }

            // 滚动到底, 上拉加载
            if(this.pullup){
                this.scroll.on('scrollEnd',(pos)=>{
                    if(this.scroll.y <= this.scroll.maxScrollY + 50){
                        this.$emit('pullup');
                    }
                })
            }
            // 是否派发顶部下拉事件，用于下拉刷新
            if (this.pulldown) {
                this.scroll.on('touchend', (pos) => {
                    // 下拉动作
                    if (pos.y > 50) {
                    this.$emit('pulldown')
                    }
                })
            }

            // 是否派发列表滚动开始的事件
            if (this.beforeScroll) {
                this.scroll.on('beforeScrollStart', () => {
                    this.$emit('beforeScroll')
                })
            }
        },
        disable(){
            this.scroll && this.scroll.disable()
        },
        enable() {
            // 代理better-scroll的enable方法
            this.scroll && this.scroll.enable()
        },
        refresh() {
            // 代理better-scroll的refresh方法
            this.scroll && this.scroll.refresh()
        },
        scrollTo() {
            // 代理better-scroll的scrollTo方法
            this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
        },
        scrollToElement() {
            // 代理better-scroll的scrollToElement方法
            this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
        }
    },
    watch:{
        data(){
            setTimeout(()=>{
                this.refresh();
            },this.refreshDelay)
        }
    }
}
</script>

<style>
.swrapper{
    width: 100%;
    height: 100%;
}
</style>